<template>
	<view class="container">
		<div class="amount" data-flex="main:center cross:center">
			<div>
				<div class="money">¥280.00</div>
				<div class="txt">需支付</div>
			</div>
		</div>
		<div class="pay-item">
			<div class="pay" data-flex="cross:center" @click="clickPayType(0)">
				<img class="icon" src="../../static/langwen/wechat.png" alt="" />
				<div class="txt" data-flex-box="1">微信支付</div>
				<div class="radio" :class="pay === 0 ? 'checked' : ''"></div>
			</div>
		</div>
		<div class="pay-item">
			<div class="pay" data-flex="cross:center" @click="clickPayType(1)">
				<img class="icon" src="../../static/langwen/alipay.png" alt="" />
				<div class="txt" data-flex-box="1">支付宝支付</div>
				<div class="radio" :class="pay === 1 ? 'checked' : ''"></div>
			</div>
		</div>
		<div class="btn-wrapper" @click="clickPay"><div class="btn" data-flex="main:center cross:center">去支付¥100.00</div></div>
	</view>
</template>

<script>
export default {
	name: 'pay',
	data() {
		return {
			pay: 0
		}
	},
	methods: {
		clickPayType (index) {
			this.pay = index;
		},
		clickPay() {
			uni.navigateTo({
				url: '/pages/langwen/payEnd'
			})
		}
	}
}
</script>

<style>
page {
	background-color: rgb(245,245,245);
}

.amount {
  height: 138px;
  background: rgba(255, 255, 255, 1);
  margin-bottom: 10px;
}

.amount .money {
  height: 33px;
  font-size: 24px;
  font-weight: 600;
  color: rgba(255, 101, 24, 1);
  line-height: 33px;
  text-align: center;
}

.amount .txt {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(127, 129, 141, 1);
  line-height: 20px;
  text-align: center;
}

.pay-item {
  padding: 15px;
  background: rgba(255, 255, 255, 1);
}

.pay {
  height: 30px;
}

.pay .icon {
  width: 30px;
  height: 30px;
  margin-right: 15px;
}

.pay .txt {
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(36, 42, 51, 1);
  line-height: 20px;
}

.pay .radio {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background-image: url("../../static/langwen/radio.png");
  background-size: 100%;
}

.pay .checked {
  background-image: url("../../static/langwen/checked.png");
}

.btn-wrapper {
  height: 44px;
  margin-top: 45px;
  padding: 0 15px;
  box-sizing: border-box;
}

.btn {
  height: 44px;
  background: rgba(253, 155, 67, 1);
  border-radius: 100px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 1px;
}
</style>
